<template>
	<div class="login" :style="loginStyle">
		<el-card shadow="always">
			<div class="login-main">
				<div class="login-logo">
					<el-image :src="loginLogo" style="width: 100%; height: 100%;"></el-image>
				</div>
				<div class="login-form">
					<el-form v-if="loginMode" :model="loginForm" :rules="rules" ref="loginRuleForm">
						<div class="login-form-title">欢迎注册</div>
						<el-form-item prop="username" :rules="[
							{ required: true, message: '请输入用户名', trigger: 'blur' }]">
							<el-input v-model="state.loginForm.username" prefix-icon="Avatar" placeholder="请输入用户名称"
								style="width:100%"></el-input>
						</el-form-item>
						<el-form-item prop="password" :rules="[
							{ required: true, message: '请输入密码', trigger: 'blur' },
						]">
							<el-input type="password" v-model="loginForm.password" prefix-icon="Lock" show-password
								placeholder="请输入密码" style="width:100%"></el-input>
						</el-form-item>
						<el-form-item prop="verifyStatus"
							:rules="[{ required: true, message: '请拖动滑块验证', trigger: 'blur' }]">
							<SlidingVerify ref="slidingVerify" :status="loginForm.verifyStatus"
								:successFun="onVerifySuccess" :errorFun="onVerifyError"></SlidingVerify>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" round @click="submit" style="width:100%">注册</el-button>
						</el-form-item>
					</el-form>
				</div>
			</div>
		</el-card>
	</div>
</template>

<script setup>
import { onBeforeMount, reactive, ref, toRefs, unref } from "vue"
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { useUserStore, useTokenStore } from '@/store/settings'
import { register } from '@/api/systemApi'
import SlidingVerify from '@/components/SlidingVerify.vue'

const userStore = useUserStore();
const tokenStore = useTokenStore();
const router = useRouter()
let loginRuleForm = ref(null)
let slidingVerify = ref()
const loginLogo = new URL('../../assets/image/login-left.png', import.meta.url).href

const state = reactive({
	loginStyle: {
		height: '',
	},
	loginForm: {
		username: '',
		password: '',
		verifyStatus: null,
		keepPassword: null,
	},
	loginMode: true,
})
const { loginStyle, loginForm, loginMode } = toRefs(state)

onBeforeMount(() => {
	state.loginStyle.height = (document.body.clientHeight || document.documentElement.clientHeight) + "px"
})

const onVerifySuccess = (e) => {
	state.loginForm.verifyStatus = e;
}
const onVerifyError = (e) => {
	state.loginForm.verifyStatus = e;
}

const submit = async () => {
	const form = unref(loginRuleForm)
	if (!form) return;
	await form.validate();

	let param = {
		username: state.loginForm.username,
		password: state.loginForm.password
	}
	register(param).then(res => {
		userStore.setUser({ "username": param.username });
		tokenStore.setToken(res.token);
		router.push({ path: 'welcome' });
	}).catch((error) => {
		ElMessage.error(
			{
				message: error.msg,
				type: 'error'
			}
		)
		state.loginForm.verifyStatus = null;
		slidingVerify.value.onRefresh()
	})
}



</script>
<style lang="scss" scoped="scoped">
.login {
	background-image: url('../../assets/image/login-bg.svg');
	background-size: 100% 100%;
	height: 100%;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;

	.el-card__body {
		padding: 0;
	}

	.login-main {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;

		.login-logo {
			background: var(--theme);
			width: 20rem;
			padding: 8rem 5rem;
			border-top-right-radius: 38px;
			border-bottom-right-radius: 38px;
		}

		.login-form {
			width: 20rem;
			padding: 8rem 5rem;

			.login-form-title {
				font-size: 18px;
				font-weight: 700;
				text-align: center;
				padding-bottom: 2rem;
			}

			.register-button {
				text-align: right;
			}
		}
	}
}
</style>
